<script>
import ResumeCard from "../components/ResumeCard.vue";
import {GetResumes} from "../api/resume.js";

export default {
  name: "IndexPage",
  components: {ResumeCard},
  data() {
    return {
      resumes: []
    }
  },
  methods: {
    toPage(page, query) {
      this.$router.push({
        name: page,
        query: query
      })
    },
    async getResumes() {
      const res = await GetResumes()
      this.resumes = res.data.data;
    }
  },
  mounted() {
    this.getResumes()
  }
}
</script>

<template>
  <div class="flex justify-center items-start w-full">
    <div class="w-[1200px] py-4">
      <div class="w-full bg-white my-4 rounded-2xl p-5 shadow flex min-h-[150px] flex-wrap">
        <resume-card @click="toPage('resume-view', {id: resume.id})" v-if="resumes.length > 0" v-for="(resume, idx) in resumes" :key="idx" :resume="resume" class="mx-2 hover:shadow-xl transition-all select-none"/>
        <div v-else class="w-full flex justify-center items-center">
          <el-empty/>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>

</style>